<template>
  <div>
    <div class="i-layout-page-header">
      <i-page-header title="燃料明细"></i-page-header>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <div class="fx-r" style="padding: 20px 0">
        <Input
          placeholder="请输入手机号码"
          style="width: 200px"
          class="mr10"
          v-model="detial.mobile"
        />

        <el-date-picker
          v-model="detial.time"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
        <el-button type="primary" style="margin-left: 6px" @click="tapSeach"
          >查询</el-button
        >
        <div class="fx-g1"></div>
        <el-button
          type="danger"
          v-if="$utils.checkPermissions(paths, 'member/detailTicketSave')"
          style="margin-left: 6px"
          @click="tapAd"
          >增/减</el-button
        >
      </div>

      <el-tabs v-model="activeName" @tab-click="tapTabs">
        <el-tab-pane name="all" label="全部"></el-tab-pane>
        <el-tab-pane name="income" label="燃料增加"></el-tab-pane>
        <el-tab-pane name="deduct" label="抵扣"></el-tab-pane>
        <el-tab-pane name="send_back" label="退还"></el-tab-pane>
        <el-tab-pane name="give_jdd" label="赠送送出"></el-tab-pane>
        <el-tab-pane name="give_add" label="赠送获得"></el-tab-pane>
        <el-tab-pane name="admin_add" label="后台补加"></el-tab-pane>
        <el-tab-pane name="admin_jdd" label="后台补扣"></el-tab-pane>
      </el-tabs>

      <el-table
        :data="detial.data"
        v-loading="detial.loading"
        :stripe="true"
        :border="true"
      >
        <el-table-column prop="id" label="id" align="center" width="80">
        </el-table-column>

        <el-table-column prop="mobile" label="会员" width="100">
        </el-table-column>

        <el-table-column prop="title" label="标题" align="center" width="100">
        </el-table-column>

        <el-table-column prop="v" label="值" align="center" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.type == 1" style="color: #2b85e4">
              + {{ scope.row.v }}
            </div>
            <div v-if="scope.row.type == 2" style="color: red">
              - {{ scope.row.v }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="money" label="剩余" align="center" width="100">
        </el-table-column>

        <el-table-column prop="content" label="内容" align="center">
        </el-table-column>

        <el-table-column prop="time" label="时间" align="center" width="140">
        </el-table-column>
      </el-table>
      <div>增:　{{ detial.total }} 减:　{{ detial.jtotal }}</div>
      <div class="acea-row row-right page">
        <Page
          :total="detial.pageCount"
          show-elevator
          show-total
          @on-change="tapPage"
          :page-size="detial.pageSize"
        />
      </div>
    </Card>

    <!--修改会员-->
    <el-dialog title="燃料" :visible.sync="dialogVisible" width="600px">
      <el-form ref="user" :model="user" label-width="80px">
        <el-form-item
          label="会员UID"
          prop="uid"
          :rules="[{ required: true, message: '请输入会员UID' }]"
        >
          <el-input
            placeholder="请输入会员UID"
            autocomplete="off"
            v-model="user.uid"
          ></el-input>
        </el-form-item>

        <el-form-item label="类型">
          <el-radio-group v-model="user.type">
            <el-radio :label="1">增加</el-radio>
            <el-radio :label="2">减少</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="数量"
          prop="v"
          :rules="[{ required: true, message: '请输入数量' }]"
        >
          <el-input
            placeholder="请输入数量"
            autocomplete="off"
            v-model="user.v"
          ></el-input>
        </el-form-item>

        <el-form-item label="说明">
          <el-input
            type="textarea"
            placeholder="请输入操作说明"
            autocomplete="off"
            v-model="user.mono"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  SystemDetailNergyList,
  SystemDetailNergySave,
  SystemDetailTicketList,
  SystemDetailTicketSave,
} from '../../../api/system/member'
import IPageHeader from '../../../layouts/system/page-header/index'
import { mapState } from 'vuex'

export default {
  name: 'nergy',
  components: { IPageHeader },
  computed: {
    ...mapState('system/user', ['info', 'paths']),
  },
  data() {
    return {
      detial: {
        page: 1,
        pageSize: 0,
        pageCount: 0,
        jtotal: 0,
        total: 0,
        mobile: '',
        time: '',
        loading: true,
        data: [],
      },
      dialogVisible: false,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      user: {
        uid: '',
        type: '',
        v: '',
        mono: '',
      },
      activeName: 'all',
    }
  },

  created() {
    this.initView()
  },
  methods: {
    initView: function () {
      this.getData()
    },
    //添加
    tapAd: function () {
      this.dialogVisible = true
    },
    //搜索栏目
    tapSeach: function () {
      this.detial.page = 1
      this.getData()
    },
    tapTabs: function () {
      this.detial.page = 1
      this.getData()
    },
    //分页
    tapPage: function (page) {
      this.detial.page = page
      this.getData()
    },
    getData: function () {
      var data = {}
      this.detial.loading = true
      data.page = this.detial.page
      data.time = this.detial.time
      data.mobile = this.detial.mobile
      data.type = this.activeName == 'all' ? '' : this.activeName
      SystemDetailTicketList(data)
        .then((res) => {
          this.detial.loading = false
          this.detial.data = res.data.list
          this.detial.pageSize = res.data.pageSize
          this.detial.pageCount = res.data.pageCount
          this.detial.jtotal = res.data.jtotal
          this.detial.total = res.data.total
        })
        .catch((err) => {
          this.detial.loading = false
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
    //提交数据
    onSubmit: function () {
      this.$refs['user'].validate((valid) => {
        if (valid) {
          this.$utils.loading(this, '提交数据中...')
          SystemDetailTicketSave(this.user)
            .then((res) => {
              this.$utils.loadingClose()
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: 'success',
                })
                this.getData()
                this.dialogVisible = false
              } else {
                this.$alert(res.msg)
              }
            })
            .catch((err) => {
              this.$utils.loadingClose()
              this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
            })
        }
      })
    },
  },
}
</script>
<style scoped></style>
